<template>
  <div class="app-container">
    <u-page title="问卷调查">

      <!--
      <div slot="header">
        <el-button type="primary" icon="el-icon-position" @click="handlePush()">
          测试发送
        </el-button>
        <el-button type="primary" icon="el-icon-edit" @click="handleConfig()">
          问卷配置
        </el-button>
      </div>
      -->

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="时间范围">
            <u-date-time-picker v-model="searchDate" @change="changeSearchDate" />
          </el-form-item>
          <el-form-item label="卡号" prop="cardNo">
            <el-input v-model="listQuery.cardNo" placeholder="请输入卡号" clearable />
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input v-model="listQuery.mobile" placeholder="请输入手机号" clearable />
          </el-form-item>
          <el-form-item label="OPENID" prop="openid">
            <el-input v-model="listQuery.openid" placeholder="请输入OPENID" clearable />
          </el-form-item>
          <el-form-item label="推送状态">
            <el-select v-model="listQuery.ack" placeholder="请选择推送状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="推送中" value="false" />
              <el-option label="推送成功" value="true" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :pagination.sync="listQuery"
        :fetch="hdlList"
      >
        <template v-slot:right>
          <el-table-column label="卡号" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.cardNo }}</span>
            </template>
          </el-table-column>
          <el-table-column label="手机" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.mobile }}</span>
            </template>
          </el-table-column>
          <el-table-column label="OPENID" align="center" width="250px">
            <template slot-scope="{ row }">
              <span>{{ row.openid }}</span>
            </template>
          </el-table-column>
          <el-table-column label="推送时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.pushDate }}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="{ row }">
              <el-tag v-if="row.ack" type="success">完成</el-tag>
              <el-tag v-else type="warning">推送中</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.createdAt | date }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="{ row }">
              <span>{{ row.note }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">详情</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog title="记录详情" :show.sync="dialogFormVisible" :footer="false">
      <el-form ref="dialogForm" :model="dataForm" label-width="100px">

        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              推送时间
            </template>
            {{ dataForm.pushDate }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              创建时间
            </template>
            {{ dataForm.createdAt | date }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              卡号
            </template>
            {{ dataForm.cardNo }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              OPENID
            </template>
            {{ dataForm.openid }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              手机号
            </template>
            {{ dataForm.mobile }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              推送状态
            </template>
            <el-tag v-if="dataForm.ack" type="success">推送成功</el-tag>
            <el-tag v-else type="warning">推送中</el-tag>
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              备注
            </template>
            {{ dataForm.note }}
          </el-descriptions-item>

        </el-descriptions>

      </el-form>
    </u-dialog>

    <!-- 配置 -->
    <config v-model="dialogConfigVisible" />

    <!-- 测试 -->
    <test v-model="dialogTestVisible" />
  </div>
</template>
<script>
import config from '../components/config.vue'
import test from '../components/test.vue'
export default {
  components: {
    config,
    test
  },
  data: function() {
    return {
      api: this.$u.api.PluginsQuestionnaireList,
      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: false, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 20,
        totalCount: 1,
        beginTime: '',
        endTime: '',
        cardNo: '',
        type: '',
        ack: ''
      },
      dialogFormVisible: false,
      dataForm: {},
      // 配置弹窗
      dialogConfigVisible: false,
      // 测试弹窗
      dialogTestVisible: false

    }
  },
  methods: {
    // 打开配置弹窗
    handleConfig() {
      this.dialogConfigVisible = true
    },
    // 打开测试弹窗
    handlePush() {
      this.dialogTestVisible = true
    },
    // 导出数据
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      list.forEach(item => {
        this.$set(item, 'createdAt', item.createdAt ? this.$u.timeFormat(item.createdAt) : '')
        this.$set(item, 'ack', item.ack ? '完成' : '推送中')
      })

      console.log(list)
      // 表头&表数据
      const tHeader = ['卡号', '手机号', 'openid', '推送时间', '状态', '创建时间', '备注']
      const filterVal = ['cardNo', 'mobile', 'openid', 'pushDate', 'ack', 'createdAt', 'note']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('问卷调查发送记录', tHeader, data)
    }
  }
}
</script>

